<template>
  <transition v-on:after-leave="afterLeave" name="slide-fade">
    <div id="dooleen-avue-form" class="dooleen-avue-form" v-show="showFormFlag">
      <div id="dooleen-detail-left" class="dooleen-detail-left">
        <!-- avue-form -->
        <div class="dooleen-avue-form-box">
          <!-- <slot name='form'></slot> -->
          <div id="dooleen-avue-form-tabs-div" class="dooleen-avue-form-tabs-div">
            <el-tabs v-model="activeForm" @tab-click="checkTab">
              <el-tab-pane label="项目信息" name="projectInfo">
                <avue-form ref="projectForm" v-model="projectInfo" :option="projectOption" @submit="submit">
                  <template slot="menuForm">
                    <el-button @click="handleCancel">取 消</el-button>
                  </template>
                </avue-form>
              </el-tab-pane>
              <el-tab-pane v-if="tabInfo.org.show" label="组织架构" name="org">
                <!-- 项目组织架构 -->
                <project-org-page ref="projectOrgPage" :projectInfo.sync="projectInfo">
                </project-org-page>
              </el-tab-pane>
              <el-tab-pane v-if="tabInfo.milestone.show" label="项目里程碑" name="milestone">
                <!-- 普通项目：软件类一般、基础设施类、咨询类 -->
                <normal-project-milestone v-if="normalProjectTypeArr.includes(projectInfo.projectCategory)"
                                          ref="normalProjectMilestone"
                                          :projectInfo.sync="projectInfo">
                </normal-project-milestone>
                <!-- 常规项目：软件类日常 -->
                <daily-project-milestone v-if="dailyProjectTypeArr.includes(projectInfo.projectCategory)"
                                         ref="dailyProjectMilestone">
                </daily-project-milestone>
              </el-tab-pane>
              <el-tab-pane v-if="tabInfo.plan.show" label="项目计划" name="plan">
                <biz-plan-manage ref="planPage" :projectInfo.sync="projectInfo">

                </biz-plan-manage>
              </el-tab-pane>
              <el-tab-pane v-if="tabInfo.approval.show" label="立项" name="approval">立项</el-tab-pane>
              <el-tab-pane v-if="tabInfo.budget.show" label="预算" name="budget">预算</el-tab-pane>
            </el-tabs>
          </div>
          <div>
            
          </div>
        </div>
        <!-- 操作按钮 -->
        <div class="dooleen-operate-box">
          <slot name='button'></slot>
        </div>
        <!-- 流程 -->
        <div id="dooleen-flow-box" class="dooleen-flow-box">
          <!-- <slot name='flow'></slot> -->
          <div id="flowAreaContainer" style="width: 100%; height: 100%;"></div>
        </div>
      </div>
      <div class="dooleen-detail-right">
        <!-- 计划 -->
        <div id="dooleen-plan-box" class="dooleen-plan-box">
          <!-- <slot name='plan'></slot> -->
          <span class="dooleen-box-title">计划信息</span>
          <div class="dooleen-right-form-div">
            <div id="dooleen-right-form-route-div" class="dooleen-right-form-route-div">
              预算需求 > 需求登记 > 测试需求
            </div>
            <avue-form ref="planForm" v-model="planSimpleInfo" :option="planSimpleOption"></avue-form>
          </div>
        </div>
        <hr size=1 class="dooleen-detail-right-hr">
        <!-- 项目 -->
        <div class="dooleen-project-box">
          <!-- <slot name='project'></slot> -->
          <span class="dooleen-box-title">项目信息</span>
          <div class="dooleen-right-form-div">
            <avue-form ref="projectSimpleForm" v-model="projectSimpleInfo" :option="projectSimpleOption"></avue-form>
          </div>
        </div>
        <hr size=1 class="dooleen-detail-right-hr">
        <!-- 需求 -->
        <div class="dooleen-demand-box">
          <!-- <slot name='demand'></slot> -->
          <span class="dooleen-box-title">需求信息</span>
          <div class="dooleen-right-form-div">
            <avue-form ref="demandSimpleForm" v-model="demandSimpleInfo" :option="demandSimpleOption"></avue-form>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {mapGetters} from 'vuex';
import {exportGeneralProjectInfoExcel,saveOrUpdateGeneralProjectInfo,saveOrUpdateGeneralProjectInfoList,saveGeneralProjectInfo,saveGeneralProjectInfoList,deleteGeneralProjectInfo,queryGeneralProjectInfo,queryGeneralProjectInfoListPage,updateGeneralProjectInfo,deleteGeneralProjectInfoList} from '@/api/general/project/generalProjectInfoApi';

// 项目组织架构页
import ProjectOrgPage from '@/views/general/project/projectOrgPage.vue';
// 里程碑页
import DailyProjectMilestone from '@/views/biz/milestone/dailyProjectMilestone.vue';
import NormalProjectMilestone from '@/views/biz/milestone/normalProjectMilestone.vue';
// 项目计划
import BizPlanManage from '@/views/biz/plan/bizPlanManage.vue';

export default {
  name: 'basicForm',
  props: {
    projectOption: {
      type: Object
    },
    showForm: {
      type: Boolean
    },
    projectFormInfo: {
      type: Object
    },
    operateType: {
      type: String
    },
    page: {
      type: Object
    }
  },
  components: {
    ProjectOrgPage,
    DailyProjectMilestone,
    NormalProjectMilestone,
    BizPlanManage
  },
  data () {
    return {
      // 普通项目类型
      normalProjectTypeArr: ['软件类一般','基础设施类','咨询类'],
      // 常规项目类型
      dailyProjectTypeArr: ['软件类日常'],

      // 控制显示
      showFormFlag: false,

      // G6 graph对象
      graph: null,
      
      // 占比
      fontSizeRate: 16/383,

      // form表单生效得页签
      activeForm: 'projectInfo',
      // 项目信息
      projectInfo: {},
      // 计划简略信息
      planSimpleInfo: {
        planName: '测试计划001',
        planDatetime: '2020-10-16 - 2020-11-20',
        actualDatetime: '2020-10-16 - 2020-11-20',
      },
      // 项目简略信息
      projectSimpleInfo: {
        projectName: '暂无',

      },
      // 需求简略信息
      demandSimpleInfo: {
        originDemandName: 'xxxxxx',
        demandName: '缩略显示需求信息1111111',
        putPerson: '张三',
        putDate: '2020-06-31',
        demandStatus: '受理',
        demandStage: '受理',
        demandSubStage: '受理',
        expectDate: '2020-06-31',
      },

      // 项目简略信息
      projectSimpleOption: {
        detail: true,
        labelSuffix: ':',
        column: [
          {
            label: '名称',
            labelWidth: 40,
            prop: 'projectName', 
            span: 24
          },
          {
            label: '类型',
            labelWidth: 40,
            prop: 'projectCategory', 
            span: 12
          },
          {
            label: '经理',
            labelWidth: 40,
            prop: 'projectManagerName', 
            span: 12
          },
          {
            label: '属主部门',
            labelWidth: 70,
            prop: 'makeMainDeptName', 
            span: 24
          },
          {
            label: '阶段',
            labelWidth: 40,
            prop: 'projectStage', 
            span: 12
          },
          {
            label: '子阶段',
            labelWidth: 60,
            prop: 'projectSubStage', 
            span: 12
          },
          {
            label: '状态',
            labelWidth: 40,
            prop: 'projectStatus', 
            span: 12
          }
        ]
      },

      // 需求简略信息
      demandSimpleOption: {
        detail: true,
        labelWidth: 105,
        column: [
          {
            label: '需求',
            prop: 'originDemandName', 
            labelWidth: 40,
            span: 12
          },
          {
            label: '实施需求',
            prop: 'demandName', 
            labelWidth: 70,
            span: 12
          },
          {
            label: '提出人',
            prop: 'putPerson', 
            labelWidth: 60,
            span: 12
          },
          {
            label: '提出时间',
            prop: 'putDate',
            labelWidth: 70,
            span: 12
          },
          {
            label: '状态',
            prop: 'demandStatus', 
            labelWidth: 40,
            span: 12
          },
          {
            label: '阶段',
            prop: 'demandStage', 
            labelWidth: 40,
            span: 12
          },
          {
            label: '子阶段',
            prop: 'demandSubStage', 
            labelWidth: 60,
            span: 12
          },
          {
            label: '期望上线时间',
            prop: 'expectDate', 
            labelWidth: 95,
            span: 12
          }
        ]
      },
    
      // 计划简略信息
      planSimpleOption: {
        detail: true,
        labelSuffix: ':',
        column: [
          {
            label: '计划起止时间',
            labelWidth: 95,
            prop: 'planDatetime', 
            span: 24,
          },
          {
            label: '当前阶段',
            labelWidth: 70,
            prop: 'progress', 
            span: 24,
          },
          {
            label: '实际起止时间',
            labelWidth: 95,
            prop: 'actualDatetime', 
            span: 24,
          },
          {
            label: '责任人',
            labelWidth: 60,
            prop: 'respsbltPersonName', 
            span: 24,
          },
          {
            label: '责任部门',
            labelWidth: 70,
            prop: 'respsbltPersonName', 
            span: 24,
          },
          {
            label: '预估',
            labelWidth: 40,
            prop: 'progress', 
            span: 24,
          },
          {
            label: '累计投入',
            labelWidth: 70,
            prop: 'progress', 
            span: 24,
          },
          {
            label: '剩余',
            labelWidth: 40,
            prop: 'progress', 
            span: 24,
          },
          {
            label: '进度',
            labelWidth: 40,
            prop: 'progress', 
            span: 24,
          }
        ]
      },

      //data
      flowData: {
        nodes: [
          {
            id: '1',
            label: '需求等级',
          },
          {
            id: '2',
            label: '需求审核',
          },
          {
            id: '3',
            label: '需求受理',
          },
        ],
      },

      // tab页签信息
      tabInfo: {
        org: {
          show: false,
        },
        milestone: {
          show: false
        },
        plan: {
          show: false
        },
        approval: {
          show: false
        },
        budget: {
          show: false
        }
      },
    }
  },
  watch: {
    showForm: {
      handler (val) {
        this.showFormFlag = this.showForm;
        if(val){
          // 如果是查看详情，就不可编辑
          if(this.operateType === 'view'){
            // this.projectOption.detail = true;
          }
          
          // 如果不是新增，查询组织架构
          if(this.operateType !== 'add'){
            // 加载组织机构树
            // this.$nextTick(() => {
            //   this.$refs.projectOrgPage.loadOrgTreeData();
            // })
            // 显示其他tab页签
            for(let key in this.tabInfo){
              this.tabInfo[key].show = true;
            }
          }else{
            // 隐藏其他tab页签
            for(let key in this.tabInfo){
              this.tabInfo[key].show = false;
            }
          }
          this.$refs.projectForm.clearValidate();
          // 处理avue表单内置btn样式
          this.setAvueFormBtnStyle();
          
          this.drawFlowCharts();
        }
      },
      deep: true
    },
    projectFormInfo: {
      handler (val) {
        this.projectInfo = this.projectFormInfo;
        // 处理项目简略信息
        this.projectSimpleInfo = this.projectFormInfo;
        this.$refs.projectForm.clearValidate();
      },
      deep: true
    },
    'projectInfo.mainSubProjectFlag': {
      handler (val) {
        var mainProjectNo =this.findObject(this.projectOption.group[0].column,'mainProjectNo');
        if(val === '子'){
          mainProjectNo.display=true;
        }else{
          mainProjectNo.display=false;
        }
      },
      immediate: true
    },
    'projectInfo.projectManagerName': {
      handler (val) {
        var projectManagerName =this.findObject(this.projectOption.group[0].column,'projectManagerName');
        this.$console.log('projectManagerName:', projectManagerName)
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['website','userInfo','orgTree','permission','genOrgTree'])
  },
  created() { 
    
  },
  mounted(){
    // 增加全局返回按钮
    this.$nextTick(() => {
      this.addReturnBtn();
    })
  },
  methods:{
    /**
     * 切换tab页签
     */
    checkTab(tab, event){
      if(tab.name === 'org'){
        this.$refs.projectOrgPage.invokeGetAllStaff();
      }else if(tab.name === 'milestone'){
        
      }else if(tab.name === 'plan'){
        this.$refs.planPage.getPlanTree();
      }
    },
    /**
     * 处理avue表单内置样式
     */
    setAvueFormBtnStyle(){
      // 基础表单域的宽高
      let baseWidth = 1636;
      let baseHeight = 815;
      // 当前表单域的宽高
      let currentWidth = document.getElementById('dooleen-avue-form').scrollWidth;
      let currentHeight = document.getElementById('dooleen-avue-form').scrollHeight;

      /**
       * vue表单内置btn样式
       */
      // 获取form表单的按钮区
      let formBtnArea = document.querySelector('.dooleen-avue-form .dooleen-detail-left .dooleen-avue-form-box .dooleen-avue-form-tabs-div .el-tabs .el-tabs__content .avue-form__menu--right');
      // 获取左侧区域的高
      let leftHeight = document.getElementById('dooleen-detail-left').scrollHeight;
      // 获取form表单的高
      let formHeight = document.getElementById('dooleen-avue-form-tabs-div').scrollHeight;
      // 获取流程区的高
      let flowAreaHeight = document.getElementById('dooleen-flow-box').scrollHeight;
      // form表单按钮区的样式
      let formStyle = 'bottom: ' + (flowAreaHeight + leftHeight * 0.025) + 'px!important';
      formBtnArea.style = formStyle;

      /**
       * 处理右侧计划、项目、需求头描述区样式
       */
      //获取dooleen-plan-box的宽
      let planBoxWidth = document.getElementById('dooleen-plan-box').scrollWidth;
      // 获取右侧计划、项目、需求头描述区
      let allRightArea = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-box-title');
      // 处理右侧计划、项目、需求头描述区样式
      for(let i in allRightArea){
        if(allRightArea[i].style){
          allRightArea[i].style.width = planBoxWidth*0.2+'px';
          allRightArea[i].style.fontSize = planBoxWidth * this.fontSizeRate + 'px';
        }
      }

      /**
       * 设置右侧区域字体大小
       */
      // let fontSize = 14*currentWidth/baseWidth + 'px';
      let fontSize = '14px';
      let heightRate = currentHeight/baseHeight;
      // 获取计划所有label节点
      let allPlanLabelNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-plan-box .el-form-item__label');
      // 设置右侧区域计划label字体大小
      for(let i in allPlanLabelNodes){
        if(allPlanLabelNodes[i].style){
          // allPlanLabelNodes[i].style.width = '90px';
          allPlanLabelNodes[i].style.fontSize = fontSize;
          // allPlanLabelNodes[i].style.transform = 'scale(' + currentWidth/baseWidth + ')';
          // allPlanLabelNodes[i].style.padding = '8px 0 0 0';
        }
      }
      // 获取项目所有label节点
      let allProjectLabelNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-project-box .el-form-item__label');
      // 设置右侧区域项目label字体大小
      for(let i in allProjectLabelNodes){
        if(allProjectLabelNodes[i].style){
          // allProjectLabelNodes[i].style.width = '60px';
          allProjectLabelNodes[i].style.fontSize = fontSize;
          allProjectLabelNodes[i].style.padding = '0px';
        }
      }
      // 获取需求所有label节点
      let allDemandLabelNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-demand-box .el-form-item__label');
      // 设置右侧区域需求label字体大小
      for(let i in allDemandLabelNodes){
        if(allDemandLabelNodes[i].style){
          // allDemandLabelNodes[i].style.width = '95px';
          allDemandLabelNodes[i].style.fontSize = fontSize;
          allDemandLabelNodes[i].style.padding = '0px';
        }
      }

      /**
       * 设置值与label之间的间距
       */
      let formItemNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .el-form-item__content');
      for(let i in formItemNodes){
        if(formItemNodes[i].style){
          formItemNodes[i].style.marginLeft = '100px';
        }
      }
      /**
       * 设置计划的值与label之间的间距
       */
      let planFormItemNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-plan-box .el-form-item__content');
      for(let i in planFormItemNodes){
        if(planFormItemNodes[i].style){
          planFormItemNodes[i].style.marginLeft = (this.planSimpleOption.column[i].labelWidth + 5) + 'px';
        }
      }
      /**
       * 设置项目的值与label之间的间距
       */
      let projectFormItemNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-project-box .el-form-item__content');
      for(let i in projectFormItemNodes){
        if(projectFormItemNodes[i].style){
          projectFormItemNodes[i].style.marginLeft = (this.projectSimpleOption.column[i].labelWidth + 5) + 'px';
        }
      }
      /**
       * 设置需求的值与label之间的间距
       */
      let demandFormItemNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .dooleen-demand-box .el-form-item__content');
      for(let i in demandFormItemNodes){
        if(demandFormItemNodes[i].style){
          demandFormItemNodes[i].style.marginLeft = (this.demandSimpleOption.column[i].labelWidth + 5) + 'px';
        }
      }


      let inputInnerNodes = document.querySelectorAll('.dooleen-avue-form .dooleen-detail-right .el-input__inner');
      for(let i in inputInnerNodes){
        if(inputInnerNodes[i].style){
          inputInnerNodes[i].style.padding = '0 0 0 6px';
          inputInnerNodes[i].style.borderBottom = '1px solid #f9f9f9';
          // inputInnerNodes[i].style.borderBottom = '1px solid #e61111';
          inputInnerNodes[i].style.fontSize = fontSize;
          // inputInnerNodes[i].style.transform = 'scale(' + currentWidth/baseWidth + ')';
          inputInnerNodes[i].style.height = 28 + 'px';
        }
      }
    },

    /**
     * 增加全局返回按钮
     */
    addReturnBtn(){
      var tabNavDiv = document.querySelector('.dooleen-avue-form-tabs-div .el-tabs .el-tabs__header .el-tabs__nav-wrap .el-tabs__nav-scroll');
      var button = document.createElement('input');
      button.setAttribute('value', '返 回');
      button.setAttribute('type', 'button');
      button.setAttribute('class', 'tab-return-btn');
      let _self = this;
      button.onclick = function (){
        _self.handleCancel();
      };
      tabNavDiv.appendChild(button);
    },

    handleCancel(){
      this.showFormFlag = false;
    },

    /**
     * 流程区绘图
     */
    drawFlowCharts(){
      let _self = this;
      if(!_self.graph){
        const width = document.getElementById('flowAreaContainer').scrollWidth;
        const height = document.getElementById('flowAreaContainer').scrollHeight
        
        // 设置各节点y轴值
        let incX = width/12;
        let preX = 0;
        for(let node of _self.flowData.nodes){
          node.x = preX + incX;
          preX = node.x;
          node.y = height * 0.45;
        }

        _self.graph = new G6.Graph({
          container: 'flowAreaContainer',
          width,
          height,
          // translate the graph to align the canvas's center, support by v3.5.1
          // fitCenter: true,
          defaultNode: {
            type: 'circle',
            size: [height/4],
            color: '#5B8FF9',
            style: {
              fill: '#9EC9FF',
              lineWidth: 3,
            },
            labelCfg: {
              style: {
                fill: '#1890ff',
                fontSize: 15,
              },
              position: 'top',
            },
            // configurations for four linkpoints
            // linkPoints: {
            //   top: true,
            //   right: true,
            //   bottom: true,
            //   left: true,
            //   // the diameter of the linkPoint
            //   size: 10,
            //   lineWidth: 1,
            //   fill: '#fff',
            //   stroke: '#1890FF',
            // },
            // icon configuration
            // icon: {
            //   // whether show the icon
            //   show: true,
            //   // icon's img address, string type
            //   img:
            //     'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
            //   width: 60,
            //   height: 60,
            // },
          },
          modes: {
            default: ['drag-canvas', 'drag-node'],
          },
          nodeStateStyles: {
            // node style of hover state
            hover: {
              fillOpacity: 0.8,
            },
            // node style of selected state
            selected: {
              lineWidth: 5,
            },
          },
        });

        _self.graph.data(_self.flowData);
        _self.graph.render();
      }
    },

    /**
     * 新增一条记录
     */
    submit(form,done) {
      const loading = this.$loading({
        lock: true,
        text: '处理中...',
        spinner: 'el-icon-loading',
      });
      let reqParams = {
        singleBody: this.projectInfo
      }
      // 解析用户名（用户ID）
      let formatUser = this.$util.formatUserName(this.projectInfo.projectManagerName);
      reqParams.singleBody.projectManagerName = formatUser.userId; 
      reqParams.singleBody.projectManagerRealName = formatUser.userName;
      let commonData = reqCommonMsg(reqParams)
      if(this.operateType === 'add'){
        saveGeneralProjectInfo(commonData).then(() => {
          // this.projectInfo={};
          // this.handleCancel();
          this.$message({
            customClass:'zZindex',
            type: 'success',
            message: '操作成功!'
          });
          // 刷新列表
          this.$emit('onLoad', this.page);

          // 新增项目成功后显示组织架构页签
          this.tabInfo.org.show = true;
          // 跳转页签到组织架构
          this.activeForm = 'org';
          loading.close();
          done()
        }, error => {
          this.$console.log(error);
          loading.close();
          done()
        });         
      }else if(this.operateType === 'edit'){
        updateGeneralProjectInfo(commonData).then(() => {
          this.projectInfo={};
          this.handleCancel();
          this.$message({
            customClass:'zZindex',
            type: 'success',
            message: '操作成功!'
          });
          this.$emit('onLoad', this.page);
          loading.close();
          done()
        }, error => {
          this.$console.log(error);
          loading();
          done()
        });
      }else if(this.operateType === 'view'){
        this.projectInfo={};
        this.handleCancel();
        loading.close();
        done()
      }
    },

    // 离开详情窗口过渡动画后
    afterLeave(){
      this.$refs.projectForm.clearValidate();
      this.$refs.projectForm.resetForm();
      // 隐藏其他tab页签
      for(let key in this.tabInfo){
        this.tabInfo[key].show = false;
      }
      this.activeForm = 'projectInfo';
      this.$emit('handleCancel');
    },
  }
};
</script>

<style lang="scss">
  .dooleen-avue-form{
    display: flex;
    height: 100%;
  }
  .dooleen-detail-left{
    width: 75%;
  }
  .dooleen-detail-right{
    width: 25%;
    height: 98%;
    border: 1px solid #c5c5c5;
    margin: 0 0 0 10px;
  }
  .dooleen-avue-form-box{
    height: 82%;
    // overflow: auto;
    padding: 10px;
    border: 1px solid #c5c5c5;
  }
  .dooleen-avue-form-box::-webkit-scrollbar {
    width: 0px;
  }
  .dooleen-avue-form-box::-webkit-scrollbar-track {
    background-color: #dadada;
  }
  .dooleen-avue-form-tabs-div{
    height: 95%;
    // overflow-y: scroll;
    .el-tabs{
      height: 90%;
      .el-tabs__content{
        height: 100%;
        .el-tab-pane{
          height: 100%;
        }
      }
    }
    .org-aside{
      height: 100%;
      border: 1px solid #ebeef5;
    }
    .el-main{
      border: 0!important;
    }
    .tab-return-btn{
      width: 50px;
      float: right;
      margin: 0 30px 0 0;
      background-color: white;
      border-radius: 5px;
      font-size: 14px;
    }
    .el-tabs__content{
      overflow-y: scroll;
    }
    .el-tabs__content::-webkit-scrollbar {
      width: 5px;
      height: 15px!important;
    }
    .el-tabs__content::-webkit-scrollbar-track {
      border-radius: 10px;
    }
    /*定义滑块 内阴影+圆角*/
    .el-tabs__content::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #919191;
    }
  }
  .dooleen-operate-box{
    height: 1%;
  }
  .dooleen-flow-box{
    height: 15%;
    width: 100%;
    padding: 10px;
    border: 1px solid #c5c5c5;
  }
  .dooleen-plan-box{
    height: 44%;
    border: 1px solid #c5c5c5;
    margin: 3% 10px 1% 10px;
    position: relative;
  }
  .dooleen-project-box{
    height: 24%;
    border: 1px solid #c5c5c5;
    margin: 1% 10px 1% 10px;
    position: relative;
  }
  .dooleen-demand-box{
    height: 23%;
    border: 1px solid #c5c5c5;
    margin: 1% 10px 1% 10px;
    position: relative;
  }
  .dooleen-avue-form{
    .dooleen-detail-left{
      .dooleen-avue-form-box{
        .avue-form__menu--right{
          text-align: right;
          bottom: 16%;
          position: fixed;
          right: 25%;
        }
      }
    }
    .dooleen-detail-right{
      .dooleen-detail-right-hr{
        margin-top: 2%;
        margin-bottom: 4%;
        color: blue;
        border-top: 2px solid #b1b1b1;
        width: 90%;
        border-radius: 50%;
      }
    }
  }
  .dooleen-box-title{
    position: absolute;
    top: -0.7em;
    left: 30px;
    font-weight: bold;
    background-color: white;
    text-align: center;
  }
  .dooleen-right-form-div{
    margin: 5% 0 0 0;
    height: 94%;
    overflow: scroll;
  }
  .dooleen-right-form-div::-webkit-scrollbar {
    width: 0px;
  }
  .dooleen-plan-box,.dooleen-project-box,.dooleen-demand-box{
    .dooleen-right-form-div{
      .el-form-item{
        margin-bottom: 0px !important;
      }
    }
    label,.el-col{
      margin-bottom: 0!important;
    }
    .avue-form__group{
      .el-col{
        padding-right: 0px !important;
      }
    }
    .el-form-item__label{
      padding: 0 6px 0 0;
      text-align: left!important;
    }
  }
  .dooleen-avue-form{
    .dooleen-detail-right{
      .el-input{
        height: 28px!important;
      }
      .el-input__inner{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
    }
  }
  .dooleen-right-form-route-div{
    font-size: 13px;    
    padding: 0 10px 0 10px;  
  }

  /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    // transform: translateX(10px);
    opacity: 0;
  }

  .org-plus{
    margin: 0 5px 0 10px;
  }
  .org-plus:hover{
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #f1f1f1;
  }
  .org-delete:hover{
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #f1f1f1;
  }
</style>
